<template>
	<view>
		<view class="p30">
			<u--form
				labelPosition="left"
				:model="model1"
				:rules="rules"
				ref="uForm"
				labelWidth="80"
			>
				<u-form-item
					label="类型"
					prop="userInfo.type"
					borderBottom
					@click="showType = true; hideKeyboard()"
					ref="item1"
				>
					<u--input
						v-model="model1.userInfo.type"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择类型"
						border="none"
					></u--input>
					<u-icon
						slot="right"
						name="arrow-right"
					></u-icon>
				</u-form-item>
				<u-form-item
					label="单位"
					prop="userInfo.company"
					borderBottom
					ref="item2"
					@click="showCompanyPicker=true"
				>
					<u--input
						v-model="model1.userInfo.company"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择单位"
						border="none"
					></u--input>
					<u-icon
						slot="right"
						name="arrow-right"
					></u-icon>
				</u-form-item>
				<u-form-item>
					绑定设备不可更换单位
				</u-form-item>	
				<u-form-item
					label="地市"
					prop="userInfo.city"
					borderBottom
					ref="item3"
					@click="showCityPicker=true"
				>
					<u--input
						v-model="model1.userInfo.city"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择地市"
						border="none"
					></u--input>
					<u-icon
						slot="right"
						name="arrow-right"
					></u-icon>
				</u-form-item>
				<u-form-item
					label="项目部"
					prop="userInfo.dept"
					borderBottom
					ref="item4"
				>
					<u--input
						v-model="model1.userInfo.dept"
						border="none"
					></u--input>
				</u-form-item>
			</u--form>
			<u-button @click="submit" type="primary" style="margin-top:20px;">提交</u-button>
		</view>
		<u-action-sheet
			:show="showType"
			:actions="actions"
			title="请选择类型"
			description=""
			@close="showType = false"
			@select="typeSelect"
		>
		</u-action-sheet>
		<u-picker :show="showCompanyPicker" :columns="columns" keyName="label" @confirm="handleChooseCompany"></u-picker>
		<u-picker :show="showCityPicker" :columns="citycolumns" keyName="label" @confirm="handleChooseCity"></u-picker>
	
	</view>
</template>

<script>
	export default {
		data() {
			return  {
				showType: false,
				model1: {
					userInfo: {
						type: '施工',
						company: '',
						city: '',
						dept: '',
					},
				},
				actions: [
					{
						name: '施工',
						id:"111"
					},
					{
						name: '监理',
						id:"222"
					}
				],
				showCompanyPicker: false,
				showCityPicker: false,
				columns: [
					[{
						label: '单位1111',
						// 其他属性值
						id: 2021
					}, {
						label: '单位2222',
						id: 804
					}]
				],
				citycolumns: [
					[{
						label: '长沙',
						// 其他属性值
						id: 430123
					}, {
						label: '株洲',
						id: 430124
					}, {
						label: '衡阳',
						id: 430125
					}]
				],
				rules: {
					'userInfo.company': {
						type: 'string',
						required: true,
						message: '请选择单位',
						trigger: ['blur', 'change']
					}
				}
			};
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			typeSelect(e) {
				console.log("typeSelect: ",e);
				this.model1.userInfo.type = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			},
			handleChooseCompany(e){
				let {id,label} = e.value[0];
				this.model1.userInfo.company = label;
				this.showCompanyPicker = false;
			},
			handleChooseCity(e){
				let {id,label} = e.value[0];
				this.model1.userInfo.city = label;
				this.showCityPicker = false;
			}
		}
	}
</script>

<style lang="scss">

	.p30{
		padding: 30rpx;
	}

</style>
